<!DOCTYPE html>
<html lang="zh-CN">
  <head>
   <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
	<title>Node.js for DataPipe</title>
    <style>
    .mainLogo{
    padding: 50px;
    background-color:#319616;
    font-size: 36px;
    text-align: center;
    color: #f5f1ee;
    font-weight: 600;
    }
    h1{color:#1b7d01;}
    .mytable{width: 100%;}
    .mytable, th, td
  {
   border: 1px solid #dddddd;
   border-collapse:collapse;
   padding:5px;
   font-size:14px;
  }
  .mytable th{background-color:#f4f4f4;}
</style>
  </head>
  <body>
   <div>
    <div class="mainLogo" style="text-align:left;">
       <span>DataPipe / 数据管道传输</span> <span style="float:right;">ASP.NET+MongoDB</span>
    </div>
    <div style="margin:0px auto;width:800px;border:1px solid #ddd;border-top:0px;padding:10px 100px;background-color:#fff;padding-bottom:30px;margin-bottom:30px;">
        <div>
            <h1>调用API说明</h1>
        </div>
        <div>
            <div>
                <h3>调用测试</h3>
            </div>
            <div>
                ActionCode: <br /><input type="text" value="private_usp_getUsers" id="actionname" style="width:800px;height:30px;" />
            </div>
            <div>
                MetaData: <br /> <textarea rows="10" id="MetaData" style="width:800px;">叶雨</textarea>
            </div>

            <div>
                <button value="CallDataPipe" onclick="CallDataPipe()">提交</button>
            </div>

            <div>
                <h6>返回结果</h6>

            </div>
            <div id="result" style="border:1px solid #e0dfdf;width:800px;min-height:300px;padding:10px;">

            </div>
        </div>
       
        <div style="margin-top:10px;">
            <table class="mytable">
                <tr>
                <th>输入参数</th>
                <td>
                    Function:必填，此项为调用API的后台方法<br />
                    MetaData:可为空，此项为调用对应方法需要的参数<br />
                </td>
                </tr>
                <tr>
                    <th>返回值</th>
                    <td>
                        {"status":"1","msg":"successfull","metadata":[]}<br />
                        <p>
                            metadata:返回的是json数组<br />
                            status:结果代码1:success,0:faild<br />
                            msg:返回信息<br />
                        </p>
                    </td>
                </tr>
                <tr>
                    <th>Post调用Demo</th>
                    <td>
                        function CallDataPipe() {<br />
        var JsonData = {};<br />
        JsonData.Function = $("#actionname").val();<br />
        JsonData.MetaData = $("#MetaData").val();<br />
        var url = ApiHref + "/api/functionRouter";<br />
        $.post(url, JsonData, function (response) {<br />
            console.log(response);<br />
            var text = response;      <br />      
            $("#result").text(text);<br />
        },"json");<br />
    }<br />
                    </td>
                </tr>
            </table>
        </div>


        <div style="border-top:5px solid #319616; margin:20px 0px">
            <h1>上传文件</h1>
            <div>
                请选择上传文件1:
                <input type="file" id="upload1" /><br />
                请选择上传文件2:
                <input type="file" id="upload2" /><br /><br />
                <input type="button" value="上传" onclick="Upload()" />
            </div>
            <div style="margin-top:10px;">
                <table class="mytable">
                    <tr>
                        <th>输入参数</th>
                        <td>                                                       
                            <i>请参考案例上传</i>                           
                        </td>
                    </tr>
                    
                     <tr>
                    <th>返回值</th>
                    <td>
                        {"status":"1","msg":"successfull","metadata":[]}<br />
                        <p>
                            metadata:返回的是json数组<br />
                            status:结果代码1:success,0:faild<br />
                            msg:返回信息<br />
                        </p>
                    </td>
                </tr>
                    <tr>
                        <th>Post调用Demo</th>
                        <td>
                           function Upload() {<br />
        var url = ApiHref + "/file/upload";<br />
        var formData = new FormData();<br />
        formData.append("inputFile", $("#upload1")[0].files[0]);<br />
        formData.append("inputFile", $("#upload2")[0].files[0]); <br />      
        $.ajax({<br />
            url: url,<br />
            type: 'POST',<br />
            data: formData,<br />
            processData: false,<br />
            contentType: false,<br />
            dataType: "json",<br />
            beforeSend: function () {<br />
                console.log("正在进行，请稍候");<br />
            },<br />
            success: function (response) {<br />
                if (response.ResultCode == "success") {   <br />                
                    console.log(response);<br />
                    alert("文件上传成功");<br />
                }<br />
                else {<br />
                    alert("上传失败");<br />
                }<br />
            },<br />
            error: function (responseStr) {<br />
                console.log("error");<br />
            }<br />
        });<br />
    }<br />
                        </td>
                    </tr>
                    <tr>
                        <th>返回结构</th>
                        <td>
                            {"status":"1","msg":"upload successfully."<br />
                            ,"metadata":[{"index":0,"fileName":"792_1730115_877227_myfile_20171214d11h39m19s856.jpg"<br />
                            ,"href":"http://www.fjyclound.cn/files/upload/792_1730115_877227_myfile_20171214d11h39m19s856.jpg"}<br />
                            ]}                            
                        </td>
                    </tr>
                </table>
            </div>

        </div>
        <div style="border-top:5px solid #319616; margin:10px 0px;">
            <h1>删除文件</h1>
            <div>
                文件名称
                <br />
                <input type="text" id="filename"  style="width:800px;height:30px;" /><br /><br />
                <input type="button" value="删除" onclick="fileRomove()" />
            </div>
            <div style="margin-top:20px;">
                <table class="mytable">
                    <tr>
                        <th>输入参数</th>
                        <td>
                            FileName:必填，文件名称<br />        
                        </td>
                    </tr>
                    <th>返回值</th>
                    <td>
                        {"status":"1","msg":"successfull","metadata":[]}<br />
                        <p>
                            metadata:返回的是json数组<br />
                            status:结果代码1:success,0:faild<br />
                            msg:返回信息<br />
                        </p>
                    </td>
                    <tr>
                        <th>Post调用Demo</th>
                        <td>
                           function fileRomove() {<br />
        var url = ApiHref + "/file/deleteFile";<br />
        var JsonData = {};      <br />
        JsonData.filename = $("#filename").val();<br />
        $.post(url, JsonData, function (response) {<br />
            console.log(response);<br />
            alert(response.ResultCode);<br />
        }, "json");<br />
    }<br />
                        </td>
                    </tr>
                    </table>
            </div>
        </div>
    </div>
</div>
    
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
   <script>
    var ApiHref="http://localhost:3000"   
    function CallDataPipe() {
        var JsonData = {};
        JsonData.Function = $("#actionname").val();
        JsonData.MetaData = $("#MetaData").val();
        var url = ApiHref + "/api/functionRouter";
        $.post(url, JsonData, function (response) {
            console.log(response);
            var text =JSON.stringify(response);            
            $("#result").text(text);
        },"json");
    }


    function Upload() {
        var url = ApiHref + "/file/upload";
        alert(url);
        var formData = new FormData();
        formData.append("inputFile", $("#upload1")[0].files[0]);
        formData.append("inputFile", $("#upload2")[0].files[0]);       
        $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            dataType: "json",
            beforeSend: function () {
                console.log("正在进行，请稍候");
            },
            success: function (response) {
                if (response.ResultCode == "success") {                   
                    console.log(response);
                    alert("文件上传成功");
                }
                else {
                    alert("上传失败");
                }
            },
            error: function (responseStr) {
                console.log("error");
            }
        });
    }


    function fileRomove() {
        var url = ApiHref + "/file/deleteFile";
        var JsonData = {};      
        JsonData.filename = $("#filename").val();
        $.post(url, JsonData, function (response) {
            console.log(response);
            alert(response.ResultCode);
        }, "json");
    }
</script>
  </body>
</html>